/**
 * Created by maiseries on 2018/1/4.
 */
import React from 'react';
import {
    StyleSheet,
    View,
    Image,
    Text,
    TextInput,
    TouchableWithoutFeedback
} from 'react-native';

import FormStatus from './FormStatus'

let self = null;

export default class FormSubmitBtn extends React.Component {

    static propTypes = {
        style: React.PropTypes.number,
        icon: React.PropTypes.number.isRequired,
        rightBtnShow: React.PropTypes.bool,
        rightBtnText: React.PropTypes.string,
        rightBtnEvent: React.PropTypes.func,
        placeholder: React.PropTypes.string,
        keyboardType: React.PropTypes.string,
        onChangeText: React.PropTypes.func,
        secureTextEntry: React.PropTypes.bool,
        maxLength: React.PropTypes.number,
        control: React.PropTypes.string,
        inputValue: React.PropTypes.any,
        rightBtnTextStyle: React.PropTypes.any
    };

    static defaultProps = {
        rightBtnShow: false,
        keyboardType: 'default',
        secureTextEntry: false,
        control: FormStatus.EDIT
    };

    constructor(prop) {
        super(prop)
    }

    render() {
        return (
            <View style={[base.rowCC, styles.fieldBox, this.props.style]}>
                <View style={[base.rowCC ,styles.iconBox]}>
                    <Image
                        style={styles.icon}
                        source={this.props.icon}
                        resizeMode='contain'
                    />
                </View>
                <View style={[base.rowCC ,styles.inputBox]}>
                    <TextInput
                        value={this.props.inputValue}
                        editable={this.props.control !== FormStatus.SUBMITTING}
                        maxLength={this.props.maxLength}
                        onChangeText={(text)=>this.props.onChangeText(text)}
                        keyboardType={this.props.keyboardType}
                        autoCorrect={false}
                        autoCapitalize="none"
                        secureTextEntry={this.props.secureTextEntry}
                        underlineColorAndroid="transparent"
                        multiline={false}
                        placeholder={this.props.placeholder}
                        placeholderTextColor={layout.AUX_FONT_COLOR}
                        style={styles.input}/>
                </View>
                {
                    this.props.rightBtnShow ?
                        <View style={styles.rightBtnBox}>
                            <TouchableWithoutFeedback onPress={() => {
                                if(this.props.control !== FormStatus.SUBMITTING) this.props.rightBtnEvent()
                            }}>
                                <View style={styles.rightBtn}>
                                    <Text allowFontScaling={false} style={[styles.rightBtnText, this.props.rightBtnTextStyle]}>{this.props.rightBtnText}</Text>
                                </View>
                            </TouchableWithoutFeedback>
                        </View> : <View/>
                }
            </View>
        )
    }
}

const styles = StyleSheet.create({
    fieldBox: {
        alignSelf: 'stretch',
        marginTop: layout.height(34),
        height: layout.height(100),
        paddingRight: layout.width(30),
        backgroundColor: '#fff',
        borderRadius: layout.width(4)
    },
    iconBox: {
        alignSelf: 'stretch',
        width: layout.width(100)
    },
    icon: {
        width: layout.width(50),
        height: layout.height(50),
    },
    rightBtnBox: {},
    rightBtn: {},
    rightBtnText: {
        color: layout.MAIN_COLOR,
        fontSize: layout.font(32)
    },
    inputBox: {
        flex: 1,
        alignSelf: 'stretch',
        paddingHorizontal: layout.GAP_HORIZONTAL_MID,
    },
    input: {
        flex: 1,
        alignSelf: 'stretch',
        fontSize: layout.font(32)
    }
});